<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">用户信息后台系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">日志系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">第三方服务系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">计费系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:">扩展组件</a>
                <dl class="layui-nav-child">
                    <dd><a href="">云服务支撑</a></dd>
                    <dd><a href="">短信业务</a></dd>
                    <dd><a href="">邮件业务</a></dd>
                </dl>
            </li>


        </ul>
        <ul class="layui-nav layui-layout-right ">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img" id="myHeader" alt="">
                    <span id="myName">测试</span>
                </>
                <dl class="layui-nav-child">
                    <dd><a href="../info.html">个人信息</a></dd>
                    <dd><a href="">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight">
                <a href="javascript:">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="user.html">账户管理</a></dd>
                        <dd><a href="department.html">部门管理</a></dd>
                        <dd><a href="auth.html">权限管理</a></dd>
                        <dd><a href="weather.html">天气管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">规格管理</a></dd>
                        <dd><a href="javascript:;">参数管理</a></dd>
                        <dd><a href="">商品名称管理</a></dd>
                        <dd><a href="">商品信息管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <span class="layui-breadcrumb">
              <a href="../index.html">首页</a>
              <a><cite>用户管理</cite></a>
              <a><cite>账户管理</cite></a>
            </span>

            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                        <label class="layui-form-label">账户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_username" placeholder="模糊查询账户" class="layui-input">
                        </div>
<!--                    <div class="layui-form-item layui-form-pane">   &lt;!&ndash;  每一个这样的div代表一个面板状态 每一个面板会自动换行 &ndash;&gt;-->
<!--                        <label class="layui-form-label">账户名称</label>-->
                        <div class="layui-input-inline">
                            <input type="text" id="search_email" placeholder="模糊查询邮箱" class="layui-input">
                        </div>
<!--                    <div class="layui-form-item layui-form-pane">   &lt;!&ndash;  每一个这样的div代表一个面板状态 每一个面板会自动换行 &ndash;&gt;-->
<!--                        <label class="layui-form-label">账户名称</label>-->
                        <div class="layui-input-inline">
                            <input type="text" id="search_lastlogintime" placeholder="yyyy-MM-dd" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="insert_user">新增用户</button>
                    <button class="layui-btn layui-btn-sm" lay-event="download_user">批量下载</button>
                    <button class="layui-btn layui-btn-sm" lay-event="download_template">下载模板</button>
                    <button type="button" class="layui-btn layui-btn-sm" id="upload_template">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            <script type="text/html" id="insert_form">   <!-- script type="text/html"  这样的定义代表默认为隐藏的窗口，等待js调用  -->
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_username" class="layui-input">
                    </div>
                </div>

                <!--                <div class="layui-form-item layui-form-pane">-->
                <!--                    <label class="layui-form-label">部门编号</label>-->
                <!--                    <div class="layui-input-inline">-->
                <!--                        <input type="text" id="insert_number" class="layui-input">-->
                <!--                    </div>-->
                <!--                </div>-->

                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_password" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-form-pane">
                    <form class="layui-form layui-form-pane" action="">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="quiz2" id="insert_action">
                                <option value=''>选择用户状态</option>
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                    </form>
                </div>

            </div>
            </script>

            <script type="text/html" id="update_form">   <!-- script type="text/html"  这样的定义代表默认为隐藏的窗口，等待js调用  -->
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_username" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_password" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_idCord" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_email" class="layui-input">
                    </div>
                </div>

                <!--                <div class="layui-form-item layui-form-pane">-->
                <!--                    <label class="layui-form-label">部门编号</label>-->
                <!--                    <div class="layui-input-inline">-->
                <!--                        <input type="text" id="update_number" class="layui-input">-->
                <!--                    </div>-->
                <!--                </div>-->

                <div class="layui-form-item layui-form-pane">
                    <form class="layui-form layui-form-pane" action="">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="quiz2" id="update_action">
                                <option value=''>选择用户状态</option>
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                    </form>
                </div>

            </div>
            </script>
            <script type="text/html" id="switchTpl">
                <!-- 这里的 checked 的状态只是演示 -->
                <input type="checkbox" name="action" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="actionDemo" {{ d.action == 1 ? 'checked' : '' }}>
            </script>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        ©2020-2021 CopyRight 捣蛋集团  www.dd.com
    </div>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../jquery/jquery-3.5.1.js"></script>
<script>


    $(function () {
        var user = localStorage.getItem("user");   // 字符串
        console.log(user);
        console.log(JSON.parse(user));
        user = JSON.parse(user);                  // 把一个json字符串转换成一个真正的json对象

        // document.getElementById("myHeader").src = user.headstr;
        // document.getElementById("myName").innerText(user.username);

        // $("#myHeader")[0].src = user.headstr;             // js原生代码
        // $("#myName")[0].innerText(user.username);         // js原生代码

        $("#myHeader").attr("src",user.headstr);            // jquery的处理办法    头像图片加载
        $("#myName").text(user.username);                    // jquery的处理办法    用户名加载

        $("#iReset").click(function () {
            $("#search_username").val("");   // 设置value值
            $("#search_email").val("");   // 设置value值
            $("#search_lastlogintime").val("");   // 设置value值
            search();
        });

        $("#searchVal").click(function () {
            var username = $("#search_username").val();   // 获取value值
            var email = $("#search_email").val();   // 获取value值
            var lastlogintime = $("#search_lastlogintime").val();   // 获取value值
            search(username,email,lastlogintime);
        });
        search();

        function search(username,email,lastlogintime) {
            layui.use(['form','table'], function(){
                var table = layui.table;
                var form = layui.form;
                var json = {};
                if(username != null && username != "") {  // 如果搜索框中，用户传递了搜索值，则并且一个json条件数据
                    json.username = username;             // js中的动态属性添加
                    // 在json中添加一个key为username的值  {username: value}
                }
                // console.log(email);
                if(email != null && email != "") {  // 如果搜索框中，用户传递了搜索值，则并且一个json条件数据
                    json.email = email;             // js中的动态属性添加
                    // 在json中添加一个key为username的值  {username: value}
                }
                if(lastlogintime != null && lastlogintime != "") {  // 如果搜索框中，用户传递了搜索值，则并且一个json条件数据
                    json.username = lastlogintime;             // js中的动态属性添加
                    // 在json中添加一个key为username的值  {username: value}
                }

                table.render({   // 渲染数据
                    elem: '#test'   // 获取table的id
                    ,url:'/user/selectForPage'    // 获取json数据
                    ,where:json               // 添加的请求查询参数
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    ,title: '用户数据表'
                    ,cols: [[    // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, templet: function(res){
                                return '<em>'+ res.id +'</em>'
                            }}
                        ,{field:'username', title:'用户名', width:120, edit: 'text', templet: function(res){
                                return '<em>'+ res.username +'</em>'
                            }}
                        ,{field:'idCord', title:'身份证', width:180, templet: function(res){
                                return '<em>'+ res.idCord +'</em>'
                            }}
                        ,{field:'email', title:'邮箱', width:180, edit: 'text', templet: function(res){
                                return '<em>'+ res.email +'</em>'
                            }}
                        ,{field:'number', title:'部门编号', width:100, edit: 'text', templet: function(res){
                                return '<em>'+ res.department.number +'</em>'
                            }}
                        ,{field:'name', title:'部门', width:100, edit: 'text', templet: function(res){
                                return '<em>'+ res.department.name +'</em>'
                            }}
                        ,{field:'lastlogintime', title:'最后登录时间', width:100, edit: 'text', templet: function(res){
                                return '<em>'+ res.lastlogintime +'</em>'
                            }}
                        ,{field:'sex', title:'状态', width:100, templet: '#switchTpl', unresize: true}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]]
                    ,page: true
                    ,done(res, index, count) {    // done代表table整个接口调用完成，并且加载了所有的按钮，渲染数据成功之后
                        layui.use('upload', function(){
                            var upload = layui.upload;

                            //执行实例
                            var uploadInst = upload.render({
                                elem: '#upload_template'    //绑定元素
                                ,url: '/user/upload'            //上传接口
                                ,accept: "file"
                                ,done: function(res){
                                    layer.msg(res.msg);
                                    //上传完毕之后，渲染table表格
                                }
                                ,error: function(){
                                    //请求异常回调
                                }
                            });
                        });
                    }

                });

                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'insert_user':
                            // layer.msg("新增数据");
                            //弹出表单
                            layer.open({
                                type: 1
                                ,title: '新增用户'         //不显示标题栏
                                ,closeBtn: false
                                ,area: ['400px','300px']  // 宽和高
                                ,shade: 0.8               // 透明度
                                ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                                ,btn: ['新增', '取消']    // 两个按钮显示的文字内容
                                ,btnAlign: 'c'           // 居中
                                ,moveType: 1             //拖拽模式，0或者1
                                ,content: $('#insert_form').html()// 引入自定义表单  对指定 script标记进行调用
                                ,success: function(layero){   // 初始化操作都是放置在这里的
                                    // 手动初始化form表单样式，并刷新select渲染
                                    // layui.use(['form'], function(){
                                    //     var form = layui.form;
                                    form.render('select');
                                    // });
                                }
                                ,btn1: function(index, layero){   // 确定按钮
                                    let username = $("#insert_username").val();
                                    let password = $("#insert_password").val();
                                    // let number = $("#insert_number").val();
                                    let action = $("#insert_action").val();   // 在jquery中，可以直接通过val方法获取到select选中的option中的value值
                                    // console.log("username=" + username);
                                    // console.log("password=" + password);
                                    // console.log("action=" + action);
                                    $.ajax({   // 异步请求   想象成线程状态
                                        url:"/user/insert",   // 请求路径
                                        type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                        contentType:"application/json;charset=utf-8",
                                        datatype:"text",
                                        // request中传递的key-value值
                                        data:JSON.stringify({
                                            username:username,
                                            password:password,
                                            // number:number,
                                            action:action
                                        }),
                                        success:function(response){
                                            layer.msg(response.msg);
                                            if(response.code === 200) {   // === 衡等
                                                layer.close(index);   // 关闭当前对话框  基于传递过来的index值进行窗口关闭
                                                search();    // 新增成功之后，需要重新渲染一下table，让用户可以看到新增的数据
                                            }
                                        },
                                        error:function(response){             // 网络请求失败，自动调用此方法
                                            layer.msg("网络服务失败，请稍后重试!");
                                            // layer.close(index);   // 关闭当前对话框
                                        }
                                    });
                                }

                            });
                            break;
                        case 'download_user':
                            data = checkStatus.data;
                            var ids = "";
                            for (i = 0; i < data.length; i++) {
                                var json = data[i];
                                var id = json.id;
                                ids += id + ",";     // 拼接   ids="1,2,3,4,5,"
                            }
                            ids = ids.substring(0,ids.length - 1);      // 拼接   id="1,2,3,4,5"
                            // layer.alert(ids);
                            window.open("/user/exportExcel?ids=" + ids, "_blank", "wid02");
                            break;
                        case 'download_template':
                            // data = checkStatus.data;
                            window.open("/downloadTemplate","_blank","win001");
                            break;
                        case 'upload_template':
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    // console.log(obj);
                    // console.log(obj.data);
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            $.ajax({   // 异步请求   想象成线程状态
                                url:"/user/deleteById",   // 请求路径
                                type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                datatype:"text",
                                // request中传递的key-value值
                                data:{
                                    id:data.id
                                },
                                success:function(response){
                                    layer.msg(response.msg);// 后台服务响应成功，自动返回数据
                                    if(response.code === 200) {
                                        layer.close(index);   // 关闭当前对话框
                                        search();
                                    }
                                },
                                error:function(response){             // 网络请求失败，自动调用此方法
                                    // console.log("出错" + response);
                                    layer.close(index);   // 关闭当前对话框
                                }
                            });
                        });



                    }else if(obj.event === 'edit'){
                        //弹出表单
                        layer.open({
                            type: 1
                            ,title: '更新用户'         //不显示标题栏
                            ,closeBtn: false
                            ,area: ['400px','400px']  // 宽和高
                            ,shade: 0.8               // 透明度
                            ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                            ,btn: ['更新', '取消']    // 两个按钮显示的文字内容
                            ,btnAlign: 'c'
                            ,moveType: 1             //拖拽模式，0或者1
                            ,content: $('#update_form').html()// 引入自定义表单,对指定 script标记进行调用
                            ,success: function(layero){// 初始化操作都是放置在这里的
                                $("#update_username").val(data.username);
                                $("#update_password").val(data.password);
                                $("#update_idCord").val(data.idCord); // 当jquery在设置select时，会自动检查对应的option的value值，并且绑定选中状态
                                $("#update_email").val(data.email);
                                $("#update_action").val(data.action);
                                $("#update_number").val(data.number);

                                // 手动初始化form表单样式，并刷新select渲染
                                form.render('select');
                            }
                            ,btn1: function(index, layero){//确定按钮
                                let username = $("#update_username").val();
                                let password = $("#update_password").val();
                                let action = $("#update_action").val();// 在jquery中，可以直接通过val方法获取到select选中的option中的value值
                                let idCord = $("#update_idCord").val();
                                let email = $("#update_email").val();
                                let number = $("#update_number").val();
                                // console.log(username);
                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/user/updateById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    contentType:"application/json;charset=utf-8",//通过json对象传递
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:JSON.stringify({
                                        id:data.id,
                                        username:username,
                                        password:password,
                                        idCord:idCord,
                                        email:email,
                                        action:action
                                    }),
                                    success:function(response){
                                        layer.msg(response.msg);// 后台服务响应成功，自动返回数据
                                        if(response.code === 200) {
                                            obj.update({//更新当前这行的记录（企业常用此方式）更新渲染处理，这样的好处在于，不用再次请求服务器刷新数据重新渲染，减少网络请求并发压力，提升网络延迟体验
                                                username:username,
                                                password:password,
                                                idCord:idCord,
                                                email:email,
                                                action:action
                                            })
                                            layer.close(index);   // 关闭当前对话框 基于传递过来的index值进行窗口关闭
                                            // search();// 新增成功之后，需要重新渲染一下table，让用户可以看到新增的数据（一般不用这种方式）
                                        }
                                    },
                                    error:function(response){// 网络请求失败，自动调用此方法
                                        layer.msg("网络服务失败，请稍后再试！");
                                        // console.log("出错" + response);
                                        // layer.close(index);   // 关闭当前对话框
                                    }
                                });

                            }

                        });
                    }
                });
                //监听开关控制器状态操作
                form.on('switch(actionDemo)', function(obj){
                    // console.log(obj.elem.checked);
                    // console.log(this.value);
                    var action = obj.elem.checked ? '1':'0';
                    var id = this.value;
                    $.ajax({   // 异步请求   想象成线程状态
                        url:"/user/updateById",   // 请求路径
                        type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                        contentType:"application/json;charset=utf-8",
                        datatype:"text",
                        // request中传递的key-value值
                        data:JSON.stringify({
                            action:action,
                            id:id
                        }),
                        success:function(response){                        // 后台服务响应成功，自动返回数据
                            layer.msg(response.msg);
                        },
                        error:function(response){             // 网络请求失败，自动调用此方法
                            layer.msg("网络服务失败，请稍后重试!");
                        }
                    });
                });
            });
        }
    });

    //JS
    layui.use(['element', 'layer', 'util', 'laydate'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,laydate = layui.laydate
            ,$ = layui.$;

        //常规用法
        laydate.render({
            elem: '#search_lastlogintime'
        });

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>
